<template>
  <div class="user-settings">
    <van-cell-group>
      <van-cell title="夜猫模式">
        <van-switch size="20px" v-model="isNightStyle" @change="changeStyle" />
      </van-cell>
      <van-cell title="登录" is-link to="login" />

      宠物身份证 我的领养 我的寄养 我的收藏
      个人主页查看：默认开启/关闭/猫条模式开启
    </van-cell-group>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
// 是否是夜猫模式
const isNightStyle = ref<boolean>(false);
const styleValue = ref<string>("light");

const changeStyle = (isNight: boolean) => {
  isNight ? (styleValue.value = "dark") : (styleValue.value = "light");
  // 一键换肤的时候缓存当前的肤色
  document.documentElement.setAttribute("data-theme", styleValue.value);
  localStorage.setItem("theme-moment-set-chengang", styleValue.value);
};

onMounted(() => {
  const style = localStorage.getItem("theme-moment-set-chengang") || "light";
  style === "dark" ? (isNightStyle.value = true) : (isNightStyle.value = false);
});
</script>

<style lang="less" scoped>
.user-settings {
  height: calc(100vh - 50px);
  overflow: auto;
  background-color: var(--background-color-std-7);

  :deep .van-hairline--top-bottom {
    border-bottom-width: 0;
  }
}
</style>
